<template>
  <Top-Page class="team">
    <cu-custom bgColor="bg-gradual-white" :isBack="true">
      <template #backText></template>
      <template #content>我的团队</template>
    </cu-custom>

    <view class="piece">
      <view class="piece-title">我的上级</view>
      <view class="list">
        <Cell v-for="item in list" :key="`sj-${item.id}`" :leftIcon="item.avatar" :label="item.name" rightIcon />
      </view>
    </view>

    <view class="piece piece-2">
      <view class="piece-title">我的下级</view>
      <view class="list">
        <Cell
          v-for="item in lists"
          :key="`xj-${item}`"
          :leftIcon="item.avatar"
          :label="item.name"
          rightIcon
          @click.stop="toChat(item)"
        />
      </view>
    </view>
  </Top-Page>
</template>

<script>
import Cell from "@/components/Cell/Cell.vue";
import { useMsgStore } from "@/store/message";
import { useloginStore } from "@/store/login";
import pinia from "@/store/index";
const loginStore = useloginStore(pinia);
const msgStore = useMsgStore(pinia);
export default {
  data() {
    return {
      userInfo: loginStore.userInfo,
      current: 0,
      items: ["我的上级", "我的下级"],
      query: {
        page: 1
      },
      status: "more",
      list: [],
      lists: []
    };
  },
  components: { Cell },
  onLoad() {
    this.getTeam(true);
    this.setSubData();
  },
  onReachBottom() {
    if (this.status === "more") {
      this.getTeam();
    }
  },
  methods: {
    toChat(info) {
      let str = `?id=${info.user_id}`;

      if (!info.is_friend) {
        info["is_group"] = 0;
        info["id"] = info.user_id;
        str += `&type=casual&realname=${info.name}&group_id=${this.group_id ?? "group_team"}`;

        let contacts = msgStore.contacts;
        let contact = this.$util.findArray(contacts, info.id);

        if (contact) {
          contact.lastContent = "";
          contact.lastSendTime = "";
          contact.type = "text";
          contact.unread += 0;
          // 更新联系人信息
          msgStore.updateContacts(contact);
        } else {
          let newContact = {
            id: info.id,
            displayName: info.name,
            avatar: info.avatar,
            lastContent: "",
            lastSendTime: "",
            is_group: info.is_group ?? 0,
            unread: 0,
            is_top: 0,
            dep_id: 0
          };

          newContact["group_id"] = this.group_id ?? "group_team";
          newContact["tempChat"] = true;

          contacts.unshift(newContact);
          msgStore.initContacts(contacts);
        }
        console.log(info, "info");
        msgStore.catchSocketAction(info);
      }

      uni.navigateTo({
        url: `/pages/message/chat?${str}`
      });
    },
    setSubData() {
      if (this.userInfo.referrer_info != undefined && this.userInfo.referrer_info != 0) {
        this.list = [this.userInfo.referrer_info];
      }
    },
    onClickItem(e) {
      let index = e.currentIndex;
      this.current = index;
      this.list = [];
      if (index === 0) {
        this.setSubData();
      } else {
        this.getTeam(true);
      }
    },
    getTeam(isReset = false) {
      this.status = "loading";
      if (isReset) {
        this.query.page = 1;
      } else {
        ++this.query.page;
      }
      this.$api.msgApi.team(this.query).then((res) => {
        if (res.data.length >= 20) {
          this.status = "more";
        } else {
          this.status = "no-more";
        }

        if (isReset) {
          this.lists = res.data;
        } else {
          this.lists = [...this.lists, ...res.data];
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  margin: 20rpx;
}
.piece-2 {
  padding-bottom: 100rpx;
}
.piece {
  width: 750rpx;
  margin-top: 16rpx;
  background-color: #fff;

  .piece-title {
    padding: 30rpx;
    font-size: 32rpx;
    font-style: normal;
    font-weight: 500;
    color: #1b1b1b;
  }

  :deep(.cell) {
    font-size: 32rpx;

    .cell__left-icon {
      width: 62rpx;
      border-radius: 12rpx;
      margin-right: 16rpx;
    }
  }

  .border-bottom-after::after {
    left: 120rpx;
  }
}
</style>
